<template>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeChapter" @select="handleSelect">
          <el-menu-item v-for="chapter in chapters" :key="chapter.idchapter" :index="chapter.idchapter.toString()">
            {{ chapter.chapName }}
          </el-menu-item>
        </el-menu>
      </el-aside>
  
      <el-main>
        <el-card>
          <div v-html="currentChapterContent"></div>
        </el-card>
      </el-main>
  
      <el-aside width="300px">
        <el-card>
          <h3>{{ book.bookName }}</h3>
          <p>作者: {{ book.author }}</p>
          <p>点击量: {{ book.clicks }}</p>
          <el-slider v-model="rating" :min="0" :max="100" show-input></el-slider>
          <el-button type="primary" @click="submitRating">提交评分</el-button>
          <el-button type="primary" @click="addToBookshelf">加入书架</el-button>
        </el-card>
      </el-aside>
    </el-container>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        book: {},
        chapters: [],
        currentChapterContent: '',
        activeChapter: '',
        rating: 0
      };
    },
    created() {
      const idbook = this.$route.params.idbook;
      this.fetchBook(idbook);
      this.fetchChapters(idbook);
      this.incrementClicks(idbook);
    },
    methods: {
      fetchBook(idbook) {
        axios.get(`/api/books/${idbook}`)
          .then(response => {
            this.book = response.data;
          })
          .catch(error => {
            console.error('获取书籍信息失败:', error);
          });
      },
      fetchChapters(idbook) {
        axios.get(`/api/books/${idbook}/chapters`)
          .then(response => {
            this.chapters = response.data;
            if (this.chapters.length > 0) {
              this.activeChapter = this.chapters[0].idchapter.toString();
              this.fetchChapterContent(this.activeChapter);
            }
          })
          .catch(error => {
            console.error('获取章节列表失败:', error);
          });
      },
      fetchChapterContent(idchapter) {
        axios.get(`/api/chapters/${idchapter}`)
          .then(response => {
            this.currentChapterContent = response.data.content;
          })
          .catch(error => {
            console.error('获取章节内容失败:', error);
          });
      },
      handleSelect(idchapter) {
        this.activeChapter = idchapter;
        this.fetchChapterContent(idchapter);
      },
      submitRating() {
        axios.post(`/api/books/${this.book.idbook}/rating`, { userRating: this.rating })
          .then(response => {
            this.$message.success('评分提交成功');
          })
          .catch(error => {
            console.error('提交评分失败:', error);
            this.$message.error('评分提交失败');
          });
      },
      addToBookshelf() {
        const iduser = this.$store.state.user.iduser; // 假设你在 Vuex 中存储了用户信息
        axios.post('/api/bookshelf', { iduser, idbook: this.book.idbook })
          .then(response => {
            this.$message.success('已加入书架');
          })
          .catch(error => {
            console.error('加入书架失败:', error);
            this.$message.error('加入书架失败');
          });
      },
      incrementClicks(idbook) {
        axios.post(`/api/books/${idbook}/click`)
          .then(response => {
            console.log('点击量增加成功');
          })
          .catch(error => {
            console.error('点击量增加失败:', error);
          });
      }
    }
  };
  </script>
  
  <style scoped>
  h3 {
    font-size: 24px;
  }
  </style>
